<template>
	<view>
		<view class="head">
			<image class="bg" src="/static/index.png"></image>
			<view class="title">
				<text>广州摆摊地图</text>
				<view style="font-size: 14px;margin-top: 10px;">PITCH FOR GUANGZHOU</view>
				<view class="margin-top"><text style="font-size: 12px;color: #FFFFFF;border: 1px solid #FFFFFF;border-radius: 16px;padding: 2px 10px;">合作QQ：908608802</text></view>
			</view>

			<view class="cu-bar search bg-white" style="width: 100%;position: absolute;top: 180px;background-color:initial;">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @input="searchInput" :adjust-position="false" type="text" placeholder="搜索区县、经营范围" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn shadow-blur round" style="color: #0081FF;" @tap="clickSearch">搜索</button>
				</view>
			</view>
		</view>

		<view style="margin-top: -15px;">
			<view class="padding">
				<view @tap="clickItem(item)" v-if="pitchs.length>0" v-for="(item,index) in pitchs" :key="index" class="solid-bottom padding-bottom padding-top">
					<view class="text-lg flex align-center"><text class="cu-tag text-blue " style="background-color: inherit;">{{item.district}}</text>{{item.channelArea}}</view>
					<view class="text-grey margin-top-xs margin-bottom-xs"><text class="cuIcon-subscription margin-right-sm"></text>{{item.scopeBusiness}}</view>
					<view class="text-grey"><text class="cuIcon-location margin-right-sm"></text>{{item.pitchAddress}}{{item.pitchAddressInfo?item.pitchAddressInfo:''}}</view>
				</view>
				<view v-else class="text-center text-grey margin-top">未找到相应数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pitchs: [],
				page: 1, //当前请求第几页
				kw: '', //搜索关键字
				fromUniCloud:true //从uniClond获取数据，否则从api获取
			}
		},
		onLoad() {
			this.reqData();
		},
		onReachBottom() {
			this.page++;
			this.reqData();
		},
		onShareAppMessage() {

		},
		methods: {
			searchInput(e) {
				this.kw = e.detail.value;
			},
			clickSearch() {
				this.page = 1;
				this.pitchs = [];
				this.reqData();
			},
			reqData() {
				if(this.fromUniCloud) {
					var that = this;
					uniCloud.callFunction({
						name: 'query',
						data: {
							page: that.page,
							kw:that.kw
						}
					}).then((res) => {
						that.pitchs = that.pitchs.concat(res.result.data);
					}).catch((err) => {
						console.error(err)
					})
				} else {
					this.$api.pitchlist(this.page, this.kw).then((res) => {
						this.pitchs = this.pitchs.concat(res.data);
					});
				}
			},
			clickItem(item) {
				uni.openLocation({
					address: item.pitchAddress,
					latitude: item.lat,
					longitude: item.lng
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.head {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bg {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.title {
		font-size: 18px;
		color: #0081ff;
		position: absolute;
		top: 80px;
		text-align: center;
	}
</style>
